<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评测平台首页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
    <!--样式文件-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <!--js文件-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <!--轮播区-->
    <div id="caloues">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#videoes" data-toggle="tab">
             <span class="glyphicon glyphicon-play"></span>   视频</a>
            </li>
            <li><a href="#pic" data-toggle="tab">图片</a></li>
        </ul>

        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="videoes">
                <video style="object-fit: fill" src="video/v01517glkli.mp4" poster="images/banner_02.png" width="100%" height="100%">

                </video>
                </div>
            <div class="tab-pane fade" id="pic">
                <div class="owl-carousel owl-theme">

                    <div class="item">
                        <img src="images/pic1_21.png">
                    </div>
                    <div class="item">
                        <img src="images/pic3_21.png">
                    </div>
                    <div class="item">
                        <img src="images/pic4_29.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--章节介绍区-->
    <div id="classes" class="clearfix">
        <div class="col-xs-2">
            <p class="class-1">
                计算机综合
            </p>
        </div>
        <div class="col-xs-8">
            <h1>计算机构成与组成原理</h1>
        </div>
        <div class="col-xs-2">
            <span class="glyphicon glyphicon-download-alt"></span>
        </div>
        <div class="col-xs-12">
            <div class="col-xs-5 forms">
                来源： <span>中国大学慕网</span>
            </div>
            <div class="col-xs-2"></div>
            <div class="col-xs-5  reads">
                <span class="glyphicon glyphicon-eye-open"></span>
                <span id="numbers">133</span>人阅读
            </div>
        </div>
        <div class="col-xs-12">
            <div class="txt-center">
<p>本课程是一门面向全院非信息类专业学生的公共基础课程。通过本课程的学习（理论教学和实践教学），使学生初步掌握信息技术基础知识；了解计算机及网络信息处理过程；熟练运用Windows操作系统和Office等应用软件解决实际问题；理解计算机网络的基本知识，熟练掌握Internet的基本应用。
    为后继课程的学习奠定基础，满足当今社会对各类专业人才信息技术应用技能的基本要求。</p>
            </div>
        </div>
    </div>
    <!--视频区-->
    <div id="videos" class="clearfix">
        <span class="certs"></span>
        <h1> 相关视频</h1>
        <div class="col-xs-12">
            <div class="owl-carousel owl-theme">
                <div class="item clearfix">
                    <div class="col-xs-4">
                        <img src="images/pic1_21.png" alt="First slide">
                        <p class="item-txt">电子技术</p>
                    </div>
                    <div class="col-xs-4">
                        <img src="images/pic2_13.png" alt="First slide">
                        <p class="item-txt">程序设计</p>
                    </div>

                    <div class="col-xs-4">
                        <img src="images/pic3_15.png" alt="First slide">
                        <p class="item-txt">应用密码学基础</p>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-4">
                        <img src="images/pic1_21.png" alt="First slide">
                        <p class="item-txt">算法设计与分析</p>
                    </div>
                    <div class="col-xs-4">
                        <img src="images/pic2_13.png" alt="First slide">
                        <p class="item-txt">人机界面设计</p>
                    </div>

                    <div class="col-xs-4">
                        <img src="images/pic3_15.png" alt="First slide">
                        <p class="item-txt">移动计算</p>
                    </div>
                </div>
                <div class="item clearfix">
                    <div class="col-xs-4">
                        <img src="images/pic1_21.png" alt="First slide">
                        <p class="item-txt">算法设计与分析</p>
                    </div>
                    <div class="col-xs-4">
                        <img src="images/pic2_13.png" alt="First slide">
                        <p class="item-txt">侧重应用的宽口径专业</p>
                    </div>

                    <div class="col-xs-4">
                        <img src="images/pic3_15.png" alt="First slide">
                        <p class="item-txt">面向对象程序设计</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!--js代码区-->
<script>
    // 开启并设置轮播插件
    $(function () {
        $(".owl-carousel").owlCarousel(
            {
                items:1,
                loop:true,
                autoplay:true,
                smartSpeed:2000,
                autoplayTimeout:3000
            }
        );
// 点击让播放按钮出现
        $("#videoes").click(function () {
                 $("#videoes video").attr("controls","controls")
          });
        $('#myTab li:eq(1) a').tab('show');

    });
</script>
</body>
</html>